<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>九幽大人的网页</title>
        <link rel="stylesheet" href="5.css">
    </head>
    <body>                      
        <header>
            <div id="header" style="cursor: pointer;">
                九幽大人的实验报告
            </div>
        </header>
        <main>
            <div id="main">
                <div id="e">成员信息与网页介绍</div>
                <div style="width: 60%;height: 131px; margin: 0px auto;border: 2px solid #262826;">
                    <div id="t">
                       <div>成员人数: <span id="d">1</span></div>
                       <div>组长: <span id="d">刘欢</span></div>
                       <div>学号: <span id="d">0223842</span></div>
                    </div>
                    <div id="r">
                       <div id="i"><span id="d">软工2211</span> :班级</div>
                       <div style="clear: both;float: right;"><span id="d">九幽大人</span> :网站名称</div>
                       <div style="clear: both;float: right;"><span id="d">动漫</span> :主题</div>
                    </div>
                       <div style="clear: both;">动机: <span id="d">对其他方面的事物不太了解,平时偶尔看下动漫,有一定的了解,易于下手.</span></div>
                       <div>网站设计: <span id="d">内容布局大致为页头,中心区和页脚,主题颜色分为黑色和白色,总共5个页面,三个子页面.每个页面都有图片加以修饰,布局使用了float—clear,position定位,制作表格时使用了伪类,ul列表.</span></div>
                </div>
                <div style="width: 100%;margin-top: 80px;height: 100%;">
                     <div style="font-weight: 900;text-align: center;font-size: 120%;">网站相关内容展示</div>
                      <div style="width: 80%;margin: 0px auto;height: 100%;">
                        <div style="width: 40%;float: left;height: 27.5%;">
                            <div id="q">展示1</div>
                            <div id="n">
                                <img src="32.gif" id="u">
                                <div id="b">使用了js,代码来源于哔哩哔哩.图片自动轮播,有左右切换图片按键,右下角也有切换图片按键.<br><br>位于主页</div>
                            </div>
                        </div>
                        <div style="width:40%;float: right;height: 27.5%;">
                            <div id="q">展示2</div>
                            <div id="n">
                                <img src="30.gif" id="u">
                                <div id="b">鼠标移到图片上显示文字,使用的是css,在CSDN上学习的.<br><br>位于主页</div>
                            </div>
                        </div>
                        <div style="width: 40%;float: left;height: 27.5%;margin-top: 80px;">
                            <div id="q">展示3</div>
                            <div id="n">
                                 <img src="29.gif" id="u">
                                 <div id="b">鼠标移到图片上会变为原来的1.5倍大小,使用的是css,在CSDN上学习的.<br><br>位于首页与子网页的页脚</div>
                            </div>
                        </div>
                        <div style="width: 40%;float: right;height: 27.5%;margin-top: 80px;">
                            <div id="q">展示4</div>
                            <div id="n">
                                 <img src="34.gif" id="u">
                                 <div id="b">鼠标移到图片上,图片会有灰白色背景,使用css,在CSDN上学习.<br><br>位于子网页"国漫"</div>
                            </div>
                        </div>
                      </div>
                </div>
                      <div id="h">
                            <div id="l">最终结果</div>
                            <div style="border: 2px solid #26282c;">
                                <div>自我评价: <span id="d">自我感觉还不错,但二级导航栏与代码的命名不太熟练,以及poistion的fixed定位.但总体来说我是满意的.</span></div>
                                <div>总结: <span id="d">基本把上课的知识都运用了,但有些内容还是运用不了,对于伪类与伪元素通过网上查找资料才勉强会用,以及div块元素的布局.</span></div>
                                <div>展望: <span id="d">希望能对于布局样式有更多的想法,更加多样化,但总体来说是不错的,在颜色方面希望有更多组合,不仅仅局限于黑白.</span></div>
                            </div>
                      </div>
            </div>
        </main>
    </body>
</html>